<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="<c:url value='/resources/lib/jquery.min.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/resources/lib/jquery.jqplot.min.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/resources/lib/plugins/jqplot.barRenderer.min.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/resources/lib/plugins/jqplot.categoryAxisRenderer.min.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/resources/lib/plugins/jqplot.pointLabels.min.js'/>"></script>
<link rel="stylesheet" type="text/css"
	href="resources/lib/jquery.jqplot.min.css" />
<script type="text/javascript">
	$(document).ready(
			function() {
				var s1 = [ 2, 6, 7, 10 ];
				var s2 = [ 7, 5, 3, 4 ];
				var s3 = [ 14, 9, 3, 8 ];
				plot3 = $.jqplot('chart3', [ s1, s2, s3 ], {
					// Tell the plot to stack the bars.
					stackSeries : true,
					captureRightClick : true,
					seriesDefaults : {
						renderer : $.jqplot.BarRenderer,
						rendererOptions : {
							// Put a 30 pixel margin between bars.
							barMargin : 30,
							// Highlight bars when mouse button pressed.
							// Disables default highlighting on mouse over.
							highlightMouseDown : true
						},
						pointLabels : {
							show : true
						}
					},
					axes : {
						xaxis : {
							renderer : $.jqplot.CategoryAxisRenderer
						},
						yaxis : {
							// Don't pad out the bottom of the data range.  By default,
							// axes scaled as if data extended 10% above and below the
							// actual range to prevent data points right on grid boundaries.
							// Don't want to do that here.
							padMin : 0
						}
					},
					legend : {
						show : false,
						location : 'e',
						placement : 'outside'
					}
				});
				// Bind a listener to the "jqplotDataClick" event.  Here, simply change
				// the text of the info3 element to show what series and ponit were
				// clicked along with the data for that point.
				$('#chart3').bind(
						'jqplotDataClick',
						function(ev, seriesIndex, pointIndex, data) {
							$('#info3').html(
									'series: ' + seriesIndex + ', point: '
											+ pointIndex + ', data: ' + data);
						});
			});
</script>
<title>Insert title here</title>
</head>
<body>

	<div align="left" id="chart3"
		style="margin-top: 20px; margin-left: 20px; width: 600px; height: 300px;"></div>
	<div align="right" id="info3"
		style="margin-top: 20px; margin-left: 720px; width: 100px; height: 120px;"></div>
</body>
</html>